<script setup>
import { ref } from 'vue';
import { addAddressAPI, getAddressDetailAPI, updateAddressAPI } from '@/api/address'
import { onLoad } from '@dcloudio/uni-app';

const getAddressDetail = async (id) => {
  const { result } = await getAddressDetailAPI(id)
  console.log(result);
  form.value = result
}

onLoad((opitons) => {
  if (opitons.id) {
    // 编辑
    uni.setNavigationBarTitle({ title: '编辑地址' })
    getAddressDetail(opitons.id)
  }
})

const form = ref({
  /** * 详细地址 */
  address: "",
  /** * 联系方式 */
  contact: "",
  /** * 是否为默认，1为是，0为否 */
  isDefault: 0,
  /** * 收货人姓名 */
  receiver: "",
  /** 省市县 */
  fullLocation: "",
  /** * 所在区/县编码 */
  countyCode: "",
  /** * 所在城市编码 */
  cityCode: "",
  /** * 所在省份编码 */
  provinceCode: "",
})

// 修改省市区
const regionChange = (ev) => {
  console.log(ev.detail);
  form.value.provinceCode = ev.detail.code[0]
  form.value.cityCode = ev.detail.code[1]
  form.value.countyCode = ev.detail.code[2]
  form.value.fullLocation = ev.detail.value.join(' ')
}

// 修改默认地址选项
const onChangeDefault = (ev) => {
  console.log(ev.detail);
  form.value.isDefault = ev.detail.value ? 1 : 0
}

// 提交表单
const submitForm = async () => {
  console.log(form.value);
  if (form.value.id) {
    // 编辑
    await updateAddressAPI(form.value)
  } else {
    // 新增
    await addAddressAPI(form.value)
  }

  uni.showToast({
    title: form.value.id ? '编辑成功' : '新增成功'
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 1000);
}
</script>

<template>
  <view class="viewport">
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input v-model="form.receiver" placeholder-style="color: #888" placeholder="请填写收货人姓名" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input v-model="form.contact" placeholder-style="color: #888" placeholder="请填写收货人手机号码" />
      </view>
      <view class="form-item">
        <text class="label">省/市/县 (区)</text>
        <picker @change="regionChange" mode="region" :value="form.fullLocation">
          <view v-if="form.fullLocation" class="region">
            {{ form.fullLocation }}
          </view>
          <view v-else class="placeholder"> 请填写收货人所在城市 </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input v-model="form.address" placeholder-style="color: #888" placeholder="街道、楼牌号信息" />
      </view>
      <view class="form-item">
        <text class="label">设置默认地址</text>
        <switch @change="onChangeDefault" :checked="form.isDefault === 1" color="#27ba9b" />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="button" @tap="submitForm"> 保 存 </view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item {
    display: flex;
    min-height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    switch {
      position: absolute;
      right: -10rpx;
      transform: scale(0.7) translateY(-8px);
    }

    picker {
      flex: 1;
    }

    .region {
      color: #333;
    }

    .placeholder {
      color: #888;
    }
  }
}

.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>